<template>
  <div class="w-full h-full beijingtupian flex justify-center items-start overflow-y-auto overflow-x-hidden">
    <div class="mt-100px bg-gray-400 bg-opacity-80 p-5 flex justify-center items-center flex-col w-3/10 rounded">
      <h1 class="font-semibold text-2xl select-none m-3">登录</h1>
      <n-form :model="model" ref="formRef" label-placement="left"
              :label-width="48" :rules="rules" class="w-full flex flex-col justify-center items-center">
        <n-form-item path="username" label="账号" class="w-full">
          <n-input v-model:value="model.username" placeholder="请输入帐号" @keydown.enter.prevent/>
        </n-form-item>
        <n-form-item path="password" label="密码" class="w-full">
          <n-input
              @keyup.delete="shanchu()"
              placeholder="请输入密码"
              v-model:value="model.password"
              type="password"
              @keydown.enter.prevent="denglu"
          />
        </n-form-item>
      </n-form>
      <div class="w-full h-5 flex justify-between items-start">
        <n-checkbox v-model:checked="jizhuzhanghao" class="ml-12">记住帐号</n-checkbox>
        <span class="dianji" @click="resetmima()">忘记密码？</span>
      </div>
      <div class="w-full flex justify-center items-center">
        <n-button class="bg-white w-32" @click="denglu()">登录</n-button>
      </div>
    </div>
  </div>
</template>

<script>
import {ref,defineComponent} from "vue"
import {useStore} from "vuex"
import {useRoute, useRouter} from "vue-router"
import {NButton, NForm, NRow, NCol, NFormItem, NInput, NCheckbox, useMessage} from "naive-ui"
import {Base64 as bianma} from "js-base64"
import http from "@/request/request"
//模块化
export default defineComponent({
  name: 'Login',//组件名称
  props: {
    //接收父组件数据
  },
  components: {
    NButton, NForm, NRow, NCol, NFormItem, NInput, NCheckbox
  },
  setup(prop, content) {
    //  这里没有this,直接使用props里数据
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    // 表单ref
    const formRef = ref(null)
    // 获取顶级组件传递下来的弹窗方法
    const message = useMessage()
    // 校验帐号的函数
    // 校验密码的函数
    // 表单数据
    const model = ref({
      username: "",
      password: "",
    })
    // 表单校验
    const rules = ref({
      username: [
        {required: true, message: '请输入帐号', trigger: ['input', 'blur']},
      ],
      password: [
        {required: true, message: '请输入密码', trigger: ['input', 'blur']},
      ],
    })
    // 记住帐号
    const jizhuzhanghao = ref(false)
    // 点击登录按钮
    const denglu = () => {
      formRef.value.validate(error => {
        if (error) {
          function aaa(canshu) {
            if (Array.isArray(canshu)) {
              canshu.forEach(item => {
                aaa(item)
              })
            } else {
              message.error(canshu.message)
            }
          }

          aaa(error)
          return false
        } else {
          http.login(model.value).then(({data})=>{
            console.log(data,"登录成功，返回了什么")
            if(data.success){
              message.success("登录成功")
              router.push("/main")
            }
          }).catch(err=>{
            console.log(err,"登录失败，返回了什么")
          })
        }
      })
    }
    // 记住帐号操作,如果没点这个选项，将存储的帐号信息删除
    const loadusername = () => {
      if (jizhuzhanghao.value) {
        console.log("记住")
        const shuju = bianma.encode(model.value.username)
        localStorage.setItem("shuju", shuju);
        localStorage.setItem("jizhu", true);
      } else {
        console.log("不记住")
        localStorage.removeItem("shuju");
        localStorage.removeItem("jizhu");
      }
    }
    // 从localStorage里面读取数据，如果有，就反映到帐号上,读取记住帐号的状态
    const init = () => {
      const shuju = localStorage.getItem("shuju")
      if (shuju) {
        model.value.username = bianma.decode(shuju)
      }
      const jizhu = localStorage.getItem("jizhu")
      jizhuzhanghao.value = !!jizhu;
    }
    // 数据置空
    const resetmodel = () => {
      model.value = {
        username: '',
        password: '',
      }
      jizhuzhanghao.value = false
    }
    // 密码框按下回退键，清空密码
    const shanchu = () => {
      model.value.password = ""
    }
    // 点击忘记密码
    const resetmima = () => {
      router.push("/resetpasswd")
    }
    // 初始化区域
    init()
    console.log("初始化一次")
    return {
      shanchu, denglu, jizhuzhanghao, rules, model, formRef,resetmima,
    }
  }
})
</script>

<style scoped>
.beijingtupian {
  background-image: url("@/assets/img/login.jpg");
  background-size: cover;
}
</style>
